<!doctype html>
<html lang="zh" class="no-js">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/style.css">
	<style>
		body {
			 background: #f0f0f0;
			// background-image: url('https://bing.mcloc.cn/api/?day=1') ;
		}

		.content{
			text-align: center;
			margin-top:100px
		}
		.in {
			height: 25px;
			width: 500px;
			border: 1px solid #ccc;
			padding: 7px 0px;
			border-radius: 3px;
			padding-left:5px;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
			-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
			-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
			transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
		}

		.in:focus{
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
		}

		.submit {
			width: 100px;
			height: 40px;
			text-align: center;
			font-family: "Microsoft YaHei", "Roboto", sans-serif;
			background: #4CAF50;
			border: 0;
			border-radius: 3px;
			color: #FFFFFF;
			font-size: 14px;
			-webkit-transition: all 0.3 ease;
			transition: all 0.3 ease;
			cursor: pointer;
		}

		.submit:active{
			opacity: 0.8;
		}

		.out {
			height: 25px;
			width: 250px;
			border: 1px solid #ccc;
			padding: 7px 0px;
			border-radius: 3px;
			padding-left:5px;
		}

		.out:focus{
			border-color: #66afe9;
			outline: 0;
			-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
		}

		.copy{
			width: 60px;
			height: 40px;
			text-align: center;
			font-family: "Microsoft YaHei", "Roboto", sans-serif;
			background: #ced4da;
			border: 0;
			border-radius: 3px;
			color: #FFFFFF;
			font-size: 14px;
			-webkit-transition: all 0.3 ease;
			transition: all 0.3 ease;
			cursor: pointer;
		}

		.copy:active{
			opacity: 0.8;
		}

	</style>
</head>
<body>
<div id="app">
	<div class="content">
		<div>
			<input class="in" v-model="origin" type="text" placeholder="请输入URL地址" />
			<button class="submit"  v-on:click="convert" type="button">压缩</button>
		</div>
		<div style="margin-top: 50px">
			<label style="font-weight: bold;font-size: 20px;line-height: 0;vertical-align: middle;">短链:</label>
			<input class="out" v-model="redirectUrl" readonly  type="text"/>
			<button class="copy" type="button"  v-on:click="copy">复制</button>
		</div>
	</div>
</div>

<script src="js/vue/vue.min.js"></script>
<script src="js/axios/axios.min.js"></script>
<script src="js/md5.js"></script>
<script >

	var V = new Vue({
		el: '#app',
		data() {
			return {
				origin:'http://3o2.link',
				redirectUrl:''
			}
		},
		mounted: () => {

		},
		methods: {

			convert: function () {
				var origin = V.origin;
				if (origin == '') {
					alert("URL地址不能为空");
					return;
				}
				var http = /(http|https):\/\/([\w.]+\/?)\S*/;
				if (!(http.test(origin))) {
					alert("必须是http/https地址");
					return;
				}
                //置空当前redirectUrl
				V.redirectUrl = '';
				var appKey = 'common';
				var appSecret = 'qVcgGihocBye6QGoETL53ruti8ZKvuqvYIcQOXuZmGigz3tgxky5UjlDWh7EWIPF';
				var ts = new Date().getTime();
				var headersParam ={
					appKey: appKey,
					ts: ts,
					appSecret: appSecret,
					sign: hex_md5(appKey+ts+appSecret)
				}
				axios.post('/link/convert', {
						origin: V.origin,
					}, {
							headers: headersParam
						}
				).then((response) => {
					let d = response.data;
					V.redirectUrl = d.redirectUrl;
					console.log(d);
				}).catch(reason => {
					alert(reason.response.data.message);
					console.error(reason.response.data.message);
				});
			},

			copy: function () {
				var url = V.redirectUrl;
				//验证是否为空
				if (url == '') {
					alert("短链还未生成");
					return;
				}
				var oInput = document.createElement('input');
				oInput.value = url;
				document.body.appendChild(oInput);
				oInput.select();
				document.execCommand("Copy");
				oInput.style.display = 'none';
			}
		},
	});
</script>
</body>
</html>
